<template>
    <div class="search">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default"
            status-icon>

            <section>
                <el-form-item label="商品分类" prop="productCategoryId">
                    <el-cascader v-model="ruleForm.productCategoryId" :options="options" :props="props" clearable />
                </el-form-item>
                <el-form-item label="商品名称" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="商品名称" />
                </el-form-item>
                <el-form-item label="副标题" prop="productSn">
                    <el-input v-model="ruleForm.productSn" placeholder="副标题" />
                </el-form-item>

                <el-form-item label="商品品牌" prop="brandId">
                    <el-select v-model="ruleForm.brandId" placeholder="请选择品牌">
                        <el-option v-for="item in brandSort" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品介绍" prop="publishStatus">
                    <el-input v-model="ruleForm.brandId" :rows="2" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="商品货号" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="商品货号" />
                </el-form-item>
                <el-form-item label="商品售价" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="商品售价" />
                </el-form-item>
                <el-form-item label="市场价" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="市场价" />
                </el-form-item>
                <el-form-item label="商品库存" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="商品库存" />
                </el-form-item>
                <el-form-item label="计量单位" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="计量单位" />
                </el-form-item>
                <el-form-item label="商品重量" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="商品重量">
                        <template #append>克</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="排序" prop="keyword">
                    <el-input v-model="ruleForm.keyword" placeholder="排序" />
                </el-form-item>
            </section>
        </el-form>
        <el-button type="primary" size="large" @click="next">下一步, 填写商品促销</el-button>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import * as http from '@/request/api'
const props = {
    value: "id", label: "name"
}

// 获取商品分类
let options = ref<productCategoryListParams[]>([])
const getProSortList = async () => {
    let res = await http.commodity.productCategoryList()
    if (res.code !== 200) return
    options.value = res.data
}
getProSortList()
// 获取品牌分类
let brandSort = ref<productCategorys[]>([])
const brandListAll = async () => {
    let res = await http.commodity.brandListAll()
    if (res.code !== 200) return;
    brandSort.value = res.data
}
brandListAll()



const emit = defineEmits(['next'])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<Indexable>({
    keyword: '',
    productSn: '',
    productCategoryId: '',
    brandId: '',
    publishStatus: '',
    verifyStatus: ''
})

const next = () => {
    emit('next', 1)
}
</script>
    
<style lang="less" scoped >
.search {
    padding: 20px;
    text-align: center;

}
</style>